<template>
    <div class="course-left">
        <el-row>
            <el-col class="top-course-container" :span="8" v-for="(c,index) in courseList" :key="index">
                <div class="top-course">
                    <dl class="item">
                        <dt><img :src="c.logo"></dt>
                        <dd>
                            {{c.cname}}<br>
                            <p class="item-footer"><span v-if="c.type==='免费'" style="color:#0bbe0b">{{c.type}}</span><span v-if="c.type==='收费'" style="color:darkorange">{{c.type}}</span><span v-show="c.top==1" style="color:orangered">[置顶]</span> <span class="pull-right">关注度<span class="num">{{c.browseNum}}</span></span></p>
                        </dd>
                    </dl>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <div style="text-align: center">
                <br>
                <!--引入elementui的分页组件，前端实现的分页-->
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="1000">
                </el-pagination>
            </div>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "MyCourseListLefter",
        data(){
            return{
                courseList:[
                    {
                        logo: 'https://img.simoniu.com/C%E8%AF%AD%E8%A8%80%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B_logo.jpg',
                        cname: 'JavaSE基础教程',
                        type: '免费',
                        browseNum:100
                    },
                    {
                        logo: 'https://img.simoniu.com/C%E8%AF%AD%E8%A8%80%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B_logo.jpg',
                        cname: 'JavaSE基础教程',
                        type: '免费',
                        browseNum:100
                    },
                    {
                        logo: 'https://img.simoniu.com/C%E8%AF%AD%E8%A8%80%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B_logo.jpg',
                        cname: 'JavaSE基础教程',
                        type: '免费',
                        browseNum:100
                    },
                    {
                        logo: 'https://img.simoniu.com/C%E8%AF%AD%E8%A8%80%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B_logo.jpg',
                        cname: 'JavaSE基础教程',
                        type: '免费',
                        browseNum:100
                    },
                    {
                        logo: 'https://img.simoniu.com/C%E8%AF%AD%E8%A8%80%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B_logo.jpg',
                        cname: 'JavaSE基础教程',
                        type: '免费',
                        browseNum:100
                    },
                    {
                        logo: 'https://img.simoniu.com/C%E8%AF%AD%E8%A8%80%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B_logo.jpg',
                        cname: 'JavaSE基础教程',
                        type: '免费',
                        browseNum:100
                    },
                    {
                        logo: 'https://img.simoniu.com/C%E8%AF%AD%E8%A8%80%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B_logo.jpg',
                        cname: 'JavaSE基础教程',
                        type: '免费',
                        browseNum:100
                    },
                    {
                        logo: 'https://img.simoniu.com/C%E8%AF%AD%E8%A8%80%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B_logo.jpg',
                        cname: 'JavaSE基础教程',
                        type: '免费',
                        browseNum:100
                    },
                    {
                        logo: 'https://img.simoniu.com/C%E8%AF%AD%E8%A8%80%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B_logo.jpg',
                        cname: 'JavaSE基础教程',
                        type: '免费',
                        browseNum:100
                    }
                ]
            }
        }
    }
</script>

<style scoped>

    .course-left{

        width: 98%;
        height: 98%;
        margin: 10px 0px 10px 0px;
        padding: 10px 0px 10px 0px;
        background: #FFF;
    }
    .top-course {
        margin: 10px;
        padding: 0px;
        border: 1px solid #DDDDDD;
    }

    .item img {
        width: 100%;
    }

    .item {
        background: #fff;
        margin: 0px;
    }

    .item dd {
        position: relative;
        left: -20px;
        height: 50px;
        background: #FFF;
        color: #336699;
        font-size: small;
        font-weight: bolder;
    }

    .item:hover {
        transform: scale(1.00, 1.00);
        box-shadow: 0 5px 12px #DDDDDD;
        cursor: pointer;
    }
    .item dt {
        overflow: hidden;
    }
    .item img {
        transition: all 1.1s;
    }

    .item img:hover {
        transform: scale(1.05);
    }
    .item-footer{
        font-size: x-small;
        font-weight: normal;
        text-align: end;
        color:#999;
    }
</style>